Responsive Webdesign (I)

Webinhalte müssen zunehmend auf sehr unterschiedlichen Geräten ansprechend dargestellt werden.U m dies zu erreichen, setzt sich zunehmend das Konzept des "Responsive Webdesigns" durch. Man versteht darunter ein Bündel von Maßnahmen, mit dem Websites so angelegt werden, dass sie sich unterschiedlichen visuellen Ausgabegeräten möglichst optimal anpassen.

Eine responsive Website besteht aus drei "Hauptzutaten":

• einem fluiden Layoutraster
• anpassungsfähigen Inhalten
• Layoutumbrüchen durch Media Queries

Layouttypen

Die erste Komponente einer responsiven Website ist das Layout. Um zu verstehen worin sich das responsive Layout von anderen Layoutansätzen unterscheidet, sollen im Folgenden die unterschiedlichen Varianten vorgestellt werden.

Das feste Layout

Als festes Layout bezeichnet man ein Layout, dessen Dimensionen in der Einheit Pixel angegeben werden und das sich darum auf unterschiedlichen Geräten nicht anpassen kann. Ist der Bildschirm zu klein, zeigt sich ein Scrollbalken oder das Layout wird vom Gerät (bis zur Unleserlichkeit) linear verkleinert.

Das fluide und das elastische Layout

Ein fluides Layout wird in Prozenten des Viewports definiert. Ändert sich die Größe des Fensters, ändern sich auch die Dimensionen des Layouts; Inhalte wie Texte oder Bilder bleiben jedoch in ihrer Größe erhalten.

Eine Mischform zwischen einem festen und einem fluiden Layout ist das elastische Layout. Hier werden die Breitenangaben in der Einheit em notiert, die sich auf die Schriftgröße bezieht. Damit ändert sich das Layout nicht bei Änderungen der Bildschirmbreite, aber bei Änderungen der Schriftgröße.

Die modernsten Variante des flexiblen Layouts sind das bereits bekannte Flexbox-Layout und das Grid-Layout, das im Augenblick aber noch nicht von allen Browsern unterstützt wird.

See the Pen c9f8abd56e90c29da863fe20ac120fcf by Bernd Schiller (@Bernie14153) on CodePen.

Das adaptive Layout

Das adaptive Layout ist im Prinzip ein festes Layout, das aber in mehreren Versionen existiert. Je nach verfügbarem Platz 'springt' das Layout bei unterschiedlichen Bildschirmbreiten um. Zwischen den Umbruchpunkten verhält es sich wie ein festes Layout – es bewegt sich nicht.

Das responsive Layout

Das responsive Layout vereint die Eigenschaften des adaptiven und des fluiden Layouts. Es verfügt ebenfalls über Schwellenwerte, ab denen das Layout sich deutlich ändert. Dazwischen aber verhält es sich wie ein fluides Layout. Zusätzlich ist es mit skalierbaren Inhalten ausgestattet; Bilder passen sich ebenfalls dem verfügbaren Platz an.

Flexible Inhalte

Flexible Bildelemente

Eine Herausforderung im Responsiven Webdesign sind Elemente, die eigene feste Dimensionen haben: Bilder, Videos oder Inline-Frames. Einfachen Bildern muss man ihre festen Dimensionen nehmen. Dabei sollen die Bilder ihr Seitenverhältnis beibehalten, sich aber gleichzeitig an jede Größenveränderung des Layouts anpassen. Zudem soll aber dafür gesorgt werden, dass die Bilder ihre Originalgröße nicht überschreiten und dadurch verpixeln. Erreichen lässt sich dies durch folgende Angabe im Stylesheet:

img{
max-width: 100%;
height: auto;
}  

See the Pen 45305c2d71b368183327561cc8922231 by Bernd Schiller (@Bernie14153) on CodePen.

Eine weitere Möglichkeit um Bildelemente flexibel zu gestalten, ist das ausschnittweise Anzeigen des Bildes. Manche Bilder lassen sich nicht skalieren, ohne dabei die Bildaussage zu verändern. In diesem Fall ist es unter Umständen besser, das Bild in der Basisversion zu beschneiden, statt es zu skalieren.

Normalerweise beginnt die Darstellung eines Bildes an der oberen linken Ecke und wird rechts und unten abgeschnitten – das passt aber nicht immer zum Motiv, das vielleicht mehr in der Bildmitte sitzt. Durch einen negativen Abstand (margin) kann das Bild innerhalb des Ausschnitts verschoben und so wichtige Elemente ins rechte Licht gerückt werden. Dafür benötigt man einen Container, der das Bild umschließt, beispielsweise das figure-Element von HTML5 oder ein extra div. Wenn diesem Element die Eigenschaft overflow:hidden mitgegeben und es durch das responsive Raster skaliert wird, bleibt das Bild in seiner originalen Größe erhalten, wird aber durch den umgebenden Container begrenzt.

See the Pen 99d4eea184b4cbc7c4f363bf39c4f6e2 by Bernd Schiller (@Bernie14153) on CodePen.

Responsives Design testen

Das Verhalten eines responsiven Designs muss natürlich auf verschiedenen Geräten getestet werden. Die Chrome-Entwicklerwerkzeuge bieten dafür eine gute Möglichkeit. Mit Strg+Shift+I erscheint die Entwickleransicht des Browsers. Mit einem Klick auf das zweite Icon in der Kopfleiste lassen sich verschiedene Auflösungen und Darstellungen in verschiedenen Geräten testen.

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8"/>
        <title>Aufgabe Responsive Design</title>
        
        <link rel="stylesheet" href="css/style.css"/>
        
       

    </head>
        
    <body>
    <div id="wrapper">

        <div id="header">
            <img id="logo" src="" />
            <h1></h1>
        </div>

        <div id="nav">
            <ul>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
                <li><a href="">Item 4</a></li>
            </ul>
        </div>

        <div id="main">
            <h2></h2>
            <img id="mainbild" src="" />
            <p></p>
        </div>

        <div id="aside">
                <p></p>
                <p></p>
        </div>

        <div id="footer">
            <ul>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
            </ul>
        </div>

    </div>
    </body>
</html>